<script setup>
const props = defineProps(["groups", "handleRaws"])

const newPeopleForm = reactive({
  rName: '',
  rNumber: '',
  rGroup: undefined,
  rEdgeLabel: '',
})

const newPeople = () => {
  if (!newPeopleForm.rName) {
    ElMessage.error('人员名不能为空')
    return;
  }
  if (!newPeopleForm.rGroup) {
    ElMessage.error('组名不能为空')
    return;
  }

  console.log(JSON.stringify(newPeopleForm))

  myPost("/relation/new", { userToken: User.token, relationJson: JSON.stringify(newPeopleForm) },
    (newPeopleId) => {
      props.handleRaws({ ...newPeopleForm, rId: newPeopleId })
      // 表单初始化
      newPeopleForm.rName = newPeopleForm.rNumber = newPeopleForm.img = newPeopleForm.rGroup = newPeopleForm.fromId = newPeopleForm.rEdgeLabel = ''
      newPeopleForm.fromType = '组名'
    })
}
</script>

<template>
  <!-- 新建人员表单 -->
  <el-form @submit.prevent :model="newPeopleForm" label-width="70px">
    <el-form-item label="姓名">
      <el-input v-model="newPeopleForm.rName" />
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="newPeopleForm.rNumber" />
    </el-form-item>

    <el-form-item label="组名">
      <el-select v-model="newPeopleForm.rGroup" placeholder="分组名称" filterable allow-create default-first-option>
        <el-option v-for="item in groups.map(a => { return { value: a, label: a } })" :key="item.value"
          :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item label="线条标签">
      <el-input v-model="newPeopleForm.rEdgeLabel" />
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="newPeople">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>